<!--<template>-->
<!--  <div class="drive-manage">-->
<!--    <div>-->
<!--      <el-button-->
<!--          @click="showAddDriveDialogBtn"-->
<!--          style="color: #545c64;margin-bottom: 20px"-->
<!--          round-->
<!--          size="small"-->
<!--      >-->
<!--        添加-->
<!--        <el-icon style="margin: 0 10px">-->
<!--          <Plus/>-->
<!--        </el-icon>-->
<!--      </el-button>-->
<!--    </div>-->
<!--    <el-card>-->
<!--      <template #header>-->
<!--        <h5>-->
<!--          已添加的设备-->
<!--        </h5>-->
<!--      </template>-->
<!--      <div class="yet-drive-list">-->
<!--        <template v-if="Devices.length>0">-->
<!--          <div-->
<!--              v-for="(item, index) in Devices"-->
<!--              :key="index"-->
<!--              class="yet-drive-item cursor-cp"-->
<!--          >-->
<!--            <h2 @click="SelectedDeviceItem(item,index)">-->
<!--              <svg-icon :size="50" :icon-class="item.DeviceType" style="margin-right: 10px;transform: rotate(40deg)"/>-->
<!--              {{ item.DeviceName }}-->
<!--            </h2>-->
<!--          </div>-->
<!--        </template>-->
<!--        <div-->
<!--            v-else-->
<!--            style="display: flex;justify-items: center;justify-content: center;width: 100%;flex-direction: column;align-items: center"-->
<!--        >-->
<!--          <svg-icon :size="222" icon-class="energy" style="color: #c8c8c8"/>-->
<!--          <label style="color: #c8c8c8">设备都去哪啦</label>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-card>-->
<!--    &lt;!&ndash;    </el-dialog>&ndash;&gt;-->

<!--    &lt;!&ndash;   选择新增的设备 &ndash;&gt;-->
<!--    <add-drive-dialog :show="ShowAddDriveDialog"-->
<!--                      @close="OnCloseAddDriveDialog" @SelectDevice="onSelectDevice">-->
<!--    </add-drive-dialog>-->
<!--    <transition name="fade" mode="out-in">-->
<!--      <el-dialog-->
<!--          :close-on-click-modal="false"-->
<!--          :title="'编辑设备：'+AddDeviceTemp?.DeviceName"-->
<!--          custom-class="edit-drive-dialog us-none"-->
<!--          v-model.value="ShowEditDriveDialog"-->
<!--          width="45%"-->
<!--          top="20vh"-->
<!--          :before-close="OnCloseEditDriveDialog"-->
<!--      >-->
<!--        <component-->
<!--            :is="AddDeviceTemp.DeviceType"-->
<!--            :ref="AddDeviceTemp.DeviceType"-->
<!--            @close="OnClose"-->
<!--        />-->
<!--      </el-dialog>-->
<!--    </transition>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->

<!--import AddDriveDialog from './DeviceHubDialog.vue'-->
<!--import PLC_S71200 from './plc/EditDriveDialog.vue'-->
<!--import SQLITE from './database/Index.vue'-->
<!--import SysDriveApi from '@/api/flow/SysDriveApi'-->
<!--import SOCKET_CLIENT from './Socket/Index.vue'-->

<!--export default {-->
<!--  name: 'Drive',-->
<!--  components: {-->
<!--    SOCKET_CLIENT,-->
<!--    AddDriveDialog,-->
<!--    SQLITE,-->
<!--    PLC_S71200-->
<!--  },-->
<!--  props: {-->
<!--    show: {-->
<!--      type: Boolean,-->
<!--      default: false-->
<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    show (v) {-->
<!--      if (v) {-->
<!--        this.DeviceVisible = v-->
<!--        this.initDrive()-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  data () {-->
<!--    return {-->
<!--      Devices: [],-->
<!--      ShowAddDriveDialog: false,-->
<!--      ShowEditDriveDialog: false,-->
<!--      DeviceVisible: false,-->
<!--      CurrentDriveIndex: null,-->
<!--      AddDeviceTemp: {}-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    OnClose () {-->
<!--      this.ShowEditDriveDialog = false-->
<!--      this.initDrive()-->
<!--    },-->
<!--    initDrive () {-->
<!--      new SysDriveApi().GetDrivelist((list) => {-->
<!--        this.Devices = list-->
<!--      })-->
<!--    },-->
<!--    SelectedDeviceItem (Device, index) {-->
<!--      this.onSelectDevice(Device)-->
<!--      this.SetValue(Device)-->
<!--      this.CurrentDriveIndex = index-->
<!--    },-->
<!--    showAddDriveDialogBtn () {-->
<!--      this.ShowAddDriveDialog = true-->
<!--    },-->
<!--    OnCloseAddDriveDialog () {-->
<!--      this.ShowAddDriveDialog = false-->
<!--    },-->
<!--    OnCloseEditDriveDialog () {-->
<!--      this.ShowEditDriveDialog = false-->
<!--    },-->
<!--    /**-->
<!--     * 刷新数据-->
<!--     * @constructor-->
<!--     */-->
<!--    OnRefresh () {-->
<!--      this.initDrive()-->
<!--    },-->
<!--    onSelectDevice (Device) {-->
<!--      this.AddDeviceTemp = Device-->
<!--      this.ShowEditDriveDialog = true-->
<!--      this.SetValue(Device)-->
<!--    },-->
<!--    SetValue (item) {-->
<!--      this.$nextTick(() => {-->
<!--        const ElementRef = this.$refs[item.DeviceType]-->
<!--        if (ElementRef) {-->
<!--          ElementRef._Show(item)-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    handleClose (done) {-->
<!--      this.DeviceVisible = false-->
<!--      this.$emit('close')-->
<!--    }-->
<!--  },-->
<!--  mounted () {-->
<!--    this.initDrive()-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style lang="less">-->
<!--.drive-manage {-->
<!--}-->

<!--.drive-dialog {-->
<!--  .el-dialog__header {-->
<!--    background-color: #545c64;-->
<!--    padding: 20px 10px;-->

<!--    .el-dialog__title {-->
<!--      color: #ffffff;-->
<!--    }-->
<!--  }-->

<!--  .el-card__header {-->
<!--    padding: 0 20px;-->
<!--  }-->

<!--  .yet-drive-list {-->
<!--    display: flex;-->
<!--    flex-wrap: wrap;-->
<!--    user-select: none;-->
<!--    overflow-y: scroll;-->
<!--    height: calc(100vh - 600px);-->

<!--    .yet-drive-item {-->
<!--      cursor: pointer;-->
<!--      padding: 20px;-->
<!--      margin: 10px;-->
<!--      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);-->
<!--      height: 130px;-->

<!--      h2 {-->
<!--        display: flex;-->
<!--        align-items: center;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->
